<template>
  <div class="personalThoughtsDetails">
    <!-- 未审核详情 -->
    <div class="personalThoughtsDetailsBox">
      <p>
        <span> 用户ID </span>
        <el-input v-model="userId" disabled placeholder="请输入内容"></el-input>
      </p>
      <p>
        <span> 用户昵称 </span>
        <el-input
          v-model="name"
          disabled
          placeholder="请输入用户昵称"
        ></el-input>
      </p>
      <p>
        <span> 审核序号 </span>
        <el-input
          v-model="num"
          disabled
          placeholder="请输入审核序号"
        ></el-input>
      </p>
      <p>
        <span> 发布时间 </span>
        <el-input
          v-model="time"
          disabled
          placeholder="请输入发布时间"
        ></el-input>
      </p>
      <p>
        <span> 想法详情 </span>
        <!-- <el-input v-model="ideaDetails" placeholder="请输入想法详情"></el-input> -->

        <el-input
          type="textarea"
          disabled
          :autosize="{ minRows: 4 }"
          v-model="ideaDetails"
        ></el-input>
      </p>
      <p>
        <span></span>
        <i v-for="(item, index) in medias" :key="index">
          <el-image
            v-if="item.mediaType == 1"
            style="width: 80px; height: 100px"
            :src="item.path"
            :preview-src-list="srcList"
          >
          </el-image>
          <a v-else class="link" :href="item.path" target="_blank"
            ><i class="el-icon-caret-right"></i>
          </a>
        </i>
      </p>
      <p>
        <span> 处理操作 </span>
        <el-radio v-model="handleRadio" :disabled="type == 1" label="1"
          >通过</el-radio
        >
        <el-radio v-model="handleRadio" :disabled="type == 1" label="2"
          >删除想法</el-radio
        >
        <el-radio v-model="handleRadio" :disabled="type == 1" label="3"
          >封禁操作</el-radio
        >
      </p>
      <p v-show="handleRadio == 3 || handleRadio == 2">
        <span> 违规原因 </span>
        <el-radio-group v-model="violationRadio">
          <el-radio
            v-for="i in radioList"
            :key="i.id"
            :label="i.id"
            :disabled="type == 1"
            >{{ i.name }}</el-radio
          >
        </el-radio-group>
      </p>
      <p v-show="handleRadio == 3">
        <span> 封禁天数 </span>
        <el-radio v-model="dayRadio" :disabled="type == 1" :label="1"
          >1天</el-radio
        >
        <el-radio v-model="dayRadio" :disabled="type == 1" :label="3"
          >3天</el-radio
        >
        <el-radio v-model="dayRadio" :disabled="type == 1" :label="7"
          >7天</el-radio
        >
        <el-radio v-model="dayRadio" :disabled="type == 1" :label="0"
          >永久</el-radio
        >
      </p>
      <!-- 已审核详情 -->
      <p v-if="type == 1">
        <span> 审核时间 </span>
        <el-input v-model="auditTime" disabled></el-input>
      </p>
      <!-- <p v-if="type == 1">
        <span> 处理状态 </span>
        <el-input v-model="auditTime" placeholder="请输入审核时间"></el-input>
        <span class="span"> 违规原因 </span>
        <el-input
          v-model="violationInpuit"
          placeholder="请输入审核时间"
        ></el-input>
        <span class="span"> 封禁时间 </span>
        <el-input v-model="closureTime" placeholder="请输入审核时间"></el-input>
      </p> -->
    </div>

    <div class="btnBox">
      <!-- <el-button @click="goBackBtn">返回</el-button> -->
      <el-button type="primary" v-if="type == 0" @click="submitBtn"
        >确认</el-button
      >
      <el-button
        type="primary"
        v-if="type == 1 && handleRadio == 1"
        @click="chuli"
        >处理此动态</el-button
      >
    </div>
  </div>
</template>

<script>
import { userBanReasonList } from "@/api/UserManagement";
import { shUserIdeaSh } from "@/api/AuditManagement";
export default {
  props: ["type", "info"],
  data() {
    return {
      id: "",
      userId: "", //用户ID
      name: "", //用户昵称
      num: "", //审核序号
      time: "", //发布时间
      ideaDetails: "", //想法详情
      medias: [], //附件
      srcList: [],
      handleRadio: "", //处理操作
      radioList: [], //违规原因数组
      violationRadio: "", //违规原因
      dayRadio: "", //封禁天数
      auditTime: "", //已审核 审核时间
      violationInpuit: "", //已审核 违规原因
      closureTime: "", //已审核 封禁时间
    };
  },
  methods: {
    //返回
    init(obj) {
      console.log(obj);
    },
    //确定
    submitBtn() {
      //如果是通过
      if (this.handleRadio == "") {
        this.$message({
          type: "error",
          message: "请选择操作内容！",
        });
        return;
      }
      if (this.handleRadio == 1) {
        shUserIdeaSh({
          id: this.id,
          ban: 1, //1.通过 2.违规
          reasonType: 1,
        }).then((res) => {
          if (res.code == 0) {
            this.$emit("colse");
            this.$message({
              message: "操作成功！",
              type: "success",
            });
          }
        });
      } else {
        let type = "";
        if (this.handleRadio == 2) {
          type = "1";
        }
        if (this.handleRadio == 3) {
          type = "2";
        }
        shUserIdeaSh({
          id: this.id,
          ban: 2,
          reasonType: this.violationRadio,
          type: type,
          days: this.dayRadio,
        }).then((res) => {
          if (res.code == 0) {
            this.$emit("colse");
            this.$message({
              message: "操作成功！",
              type: "success",
            });
          }
        });
      }
    },
    //
    chuli() {
      this.$emit("chuli", this.info);
    },
  },
  created() {
    userBanReasonList({}).then((res) => {
      if (res.code == 0) {
        this.radioList = res.data;
      }
    });
  },
  // mounted() {
  //   console.log(info);
  // },
  watch: {
    info: {
      deep: true,
      immediate: true,
      handler: function (newV, oldV) {
        console.log("watch中：", newV);
        this.id = newV.id;
        this.userId = newV.userId;
        this.name = newV.nickname;
        this.num = newV.id;
        this.time = newV.createTime;
        this.time = newV.createTime;
        this.ideaDetails = newV.content;
        this.medias = newV.medias;
        this.srcList = [];
        this.medias.forEach((item) => {
          if (item.mediaType == 1) {
            this.srcList.push(item.path);
          }
        });
        this.auditTime = "";
        this.handleRadio = "1";
        this.violationRadio = 1;
        this.dayRadio = 1;
        //下面是已审核处理
        //如果是已审核
        if (this.type == 1) {
          this.auditTime = newV.auditTime;
          //如果是通过审核
          if (newV.status == 1) {
            this.handleRadio = "1";
          }
          //如果是未通过审核
          if (newV.status == 2) {
            this.violationRadio = newV.audit_info.reason;
            //如果是删除想法
            if (newV.audit_info.type == 1) {
              this.handleRadio = "2";
            }
            //如果是禁封操作
            if (newV.audit_info.type == 2) {
              this.handleRadio = "3";
              this.dayRadio = newV.audit_info.days;
            }
          }
          //如果是已删除
          if (newV.status == 3) {
            this.violationRadio = newV.audit_info.reason;
            this.handleRadio = "2";
          }
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.personalThoughtsDetails {
  margin: 30px;
  height: 100%;
  .personalThoughtsDetailsBox {
    p {
      display: flex;
      line-height: 40px;
      span {
        width: 80px;
        line-height: 40px;
      }
      i {
        font-style: normal;
        margin-right: 20px;
      }
      a {
        display: inline-block;
        width: 80px;
        height: 100px;
        background: #ccc;
        padding: 25px 20px;
        i {
          font-size: 40px;
        }
      }
      .medias {
        display: inline-block;
      }
      .el-input {
        width: 200px;
      }
      .el-radio {
        line-height: 40px;
      }
      .span {
        margin-left: 20px;
      }
    }
  }
  .btnBox {
    text-align: center;
    margin-top: 60px;
  }
}
</style>